/**
 * title 标题
 * time 时间
 * status 状态 【-1:执行失败,0:未执行,1:执行成功,2:执行中,3:待操作】
 * 
 **/
function stepIcon() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";
    var uuid = s.join("").replaceAll("-", "").replace(/\s+/g, '');
    return uuid;
}
var colorMapArray = new Map();
layui.define(['jquery', 'laytpl'], function (exports) {
  'use strict';
  var $ = layui.jquery
    , step = {
      config: {
        width: '14%'
      }
    }
    //常量
    , STEP = 'step'
    , STEP_TEMP = function (options) {
      var options = options || {}
      var stepsData = options.data;
      var optionsWidth = options.width != undefined && options.width != null && options.width != "" ? "width: " + options.width + ";" : "";
      var optionsCurrent = options.current != undefined && options.current != null && options.current != "" ? options.current : 0;//处于第几阶段
      var optionsColor = options.color != undefined && options.color != null && options.color != "" ? options.color : {};//处于第几阶段
      var html = ``;
       // color:var(--global-primary-color);background: linear-gradient(to right, #ff0000, #ffff00);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
      for (var i in stepsData) {
        var title = stepsData[i].title != undefined && stepsData[i].title != null && stepsData[i].title != "" ? stepsData[i].title : "";
        var time = stepsData[i].time != undefined && stepsData[i].time != null && stepsData[i].time != "" ? stepsData[i].time : "";
        var status = stepsData[i].status != undefined && stepsData[i].status != null && stepsData[i].status != "" ? stepsData[i].status : "";
        var iconStr = "";
        var titleStr = "";
        var timeStr = "";
        var cjtStr = "";
        var uuidStr = stepIcon();
        if(optionsCurrent > 0){
          if(i < optionsCurrent){
            iconStr = `<i class="icon iconfont icon-yizhihang" style="font-size: 30px;color:#00bf00;"></i>`;
            cjtStr = `<i id="` + uuidStr + `" class="icon iconfont icon-changjiantou i-m" style="color:#00bf00;"></i>`;
            if(title != ""){
              titleStr = `<p style="color:#00bf00;">` + title + `</p>`;
            }
            if(time != ""){
              timeStr = `<p style="color:#00bf00;">` + time + `</p>`;
            }
            colorMapArray.set(uuidStr,"#00bf00");
          } else {
            iconStr = `<i class="icon iconfont icon-weizhihang1" style="font-size: 30px;color:#848484;"></i>`;
            cjtStr = `<i id="` + uuidStr + `" class="icon iconfont icon-changjiantou i-m" style="color:#848484;"></i>`;
            if(title != ""){
              titleStr = `<p style="color:#848484;">` + title + `</p>`;
            }
            if(time != ""){
              timeStr = `<p style="color:#848484;">` + time + `</p>`;
            }
            colorMapArray.set(uuidStr,"#848484");
          }
        } else {
          iconStr = `<i class="icon iconfont icon-weizhihang1" style="font-size: 30px;color:#848484;"></i>`;
          cjtStr = `<i id="` + uuidStr + `" class="icon iconfont icon-changjiantou i-m" style="color:#848484;"></i>`;
          if(title != ""){
            titleStr = `<p style="color:#848484;">` + title + `</p>`;
          }
          if(time != ""){
            timeStr = `<p style="color:#848484;">` + time + `</p>`;
          }
          colorMapArray.set(uuidStr,"#848484");
        }
        // -1:执行失败,0:未执行,1:执行成功,2:执行中
        if(status != ""){
          if(status == "-1"){ //-1:执行失败
            var status_1 = optionsColor["-1"] != undefined && optionsColor["-1"] != null && optionsColor["-1"] != "" ? optionsColor["-1"] : "red";
            iconStr = `<i class="icon iconfont icon-times-circle" style="font-size: 30px;color:` + status_1 + `;"></i>`;
            cjtStr = `<i id="` + uuidStr + `" class="icon iconfont icon-changjiantou i-m" style="color:` + status_1 + `;"></i>`;
            if(title != ""){
              titleStr = `<p style="color:` + status_1 + `;">` + title + `</p>`;
            }
            if(time != ""){
              timeStr = `<p style="color:` + status_1 + `;">` + time + `</p>`;
            }
            colorMapArray.set(uuidStr,status_1);
          } else if(status == "0"){
            var status0 = optionsColor["0"] != undefined && optionsColor["0"] != null && optionsColor["0"] != "" ? optionsColor["0"] : "#848484";
            iconStr = `<i class="icon iconfont icon-weizhihang1" style="font-size: 30px;color:` + status0 + `;"></i>`;
            cjtStr = `<i id="` + uuidStr + `" class="icon iconfont icon-changjiantou i-m" style="color:` + status0 + `;"></i>`;
            if(title != ""){
              titleStr = `<p style="color:` + status0 + `;">` + title + `</p>`;
            }
            if(time != ""){
              timeStr = `<p style="color:` + status0 + `;">` + time + `</p>`;
            }
            colorMapArray.set(uuidStr,status0);
          } else if(status == "1"){
            var status1 = optionsColor["1"] != undefined && optionsColor["1"] != null && optionsColor["1"] != "" ? optionsColor["1"] : "#00bf00";
            iconStr = `<i class="icon iconfont icon-yizhihang" style="font-size: 30px;color:` + status1 + `;"></i>`;
            cjtStr = `<i id="` + uuidStr + `" class="icon iconfont icon-changjiantou i-m" style="color:` + status1 + `;"></i>`;
            if(title != ""){
              titleStr = `<p style="color:` + status1 + `;">` + title + `</p>`;
            }
            if(time != ""){
              timeStr = `<p style="color:` + status1 + `;">` + time + `</p>`;
            }
            colorMapArray.set(uuidStr,status1);
          } else if(status == "2"){ //2:执行中
            var status0 = optionsColor["0"] != undefined && optionsColor["0"] != null && optionsColor["0"] != "" ? optionsColor["0"] : "#848484";
            var status2 = optionsColor["2"] != undefined && optionsColor["2"] != null && optionsColor["2"] != "" ? optionsColor["2"] : "#fd8e00";
            iconStr = `<i class="icon iconfont icon-dingdanxiangqing-chuangjianshijian" style="font-size: 30px;color:` + status2 + `;"></i>`;
            cjtStr = `<i id="` + uuidStr + `" class="icon iconfont icon-changjiantou i-m" style="color:` + status0 + `;"></i>`;
            if(title != ""){
              titleStr = `<p style="color:` + status2 + `;">` + title + `</p>`;
            }
            if(time != ""){
              timeStr = `<p style="color:` + status2 + `;">` + time + `</p>`;
            }
            colorMapArray.set(uuidStr,status2);
          } else if(status == "3"){ //2:执行中
            var status0 = optionsColor["0"] != undefined && optionsColor["0"] != null && optionsColor["0"] != "" ? optionsColor["0"] : "#848484";
            var status2 = optionsColor["3"] != undefined && optionsColor["3"] != null && optionsColor["3"] != "" ? optionsColor["3"] : "var(--global-primary-color)";
            iconStr = `<i class="icon iconfont icon-dingdanxiangqing-chuangjianshijian" style="font-size: 30px;color:` + status2 + `;"></i>`;
            cjtStr = `<i id="` + uuidStr + `" class="icon iconfont icon-changjiantou i-m" style="color:` + status0 + `;"></i>`;
            if(title != ""){
              titleStr = `<p style="color:` + status2 + `;">` + title + `</p>`;
            }
            if(time != ""){
              timeStr = `<p style="color:` + status2 + `;">` + time + `</p>`;
            }
            colorMapArray.set(uuidStr,status2);
          }
        }
        if(i == stepsData.length -1){
          cjtStr = "";
        }
        html = html + `
          <div class="_item center" style="` + optionsWidth + `"> 
              ` + iconStr + `
              <div>
                ` + titleStr + `
                ` + timeStr + `
              </div>
              ` + cjtStr + `
          </div>
          `;
      }
      return html;
    }
    //操作当前实例
    , thisStep = function () {
      var that = this
        , options = that.config;

      return {
        reload: function (options) {
          that.reload.call(that, options);
        }
        , config: options
      }
    }
    , Class = function (options) {
      var that = this;
      that.config = $.extend({}, step.config, that.config, options);
      that.render();
    };

  //默认配置
  Class.prototype.config = {
    //颜色
    color: {
      success: '#009E94',
      error: '#FF5722'
    }
  };
  //加载
  Class.prototype.render = function () {
    var that = this , options = that.config;
    options.elem = $(options.elem);
    if (!options.elem[0]) throw Error('没有找到' + options.elem.selector + '对应的元素');
    var stepTempHtml = STEP_TEMP(options);
    var othis = options.elem;
    othis.html(stepTempHtml);
    othis.addClass("_ma5");
    colorMapArray.forEach(function (value, index,array) {
      var colorId = index;
      var booleans = false;
      var colorValue = value;
      colorMapArray.forEach(function (value, index,array) {
          if(booleans){
            $("#" + colorId).attr("style","background: linear-gradient(to right, " + colorValue + ", " + value + ");-webkit-background-clip: text;-webkit-text-fill-color: transparent;");
            booleans = false;
          }
          if(colorId == index){
            booleans = true;
          }
      });
    });
  };

  step.ready = function (options) {
    var inst = new Class(options);
    return thisStep.call(inst);
  }

  exports(STEP, step);
});